<template>
    <div class="content">
        <div class="body">
            <div class="body_top">
                <div class="box">是否启用：<el-switch v-model="product.status" /></div>
                <div class="box">是否不计库存：<el-switch v-model="value1" /></div>
            </div>
            <div class="body_main">
                <div class="main_top">
                    <div class="main_top_left">
                        <div class="box">
                            <div>条码：</div>
                            <el-input v-model="product.barcode" :clearable=true></el-input>
                        </div>
                        <div class="box">
                            <div>品名：</div>
                            <el-input v-model="product.name" :clearable=true></el-input>
                        </div>
                        <div class="box">
                            <div>分类：</div>
                            <el-input v-model="product.type_name" :clearable=true></el-input>
                        </div>
                    </div>
                    <div class="main_top_right">
                        <el-image :src="product.thumb_text" style="width:100%" fit="contain"></el-image>
                    </div>
                </div>
                <div class="main_bottom">
                    <div class="box">
                        <div class="label">售价:</div>
                        <el-input v-model="product.price"></el-input>
                        <div>元</div>
                    </div>
                    <div class="box">
                        <div class="label">原价:</div>
                        <el-input v-model="product.originalprice"></el-input>
                        <div>元</div>
                    </div>
                    <div class="box">
                        <div class="label">库存:</div>
                        <el-input v-model="product.stock"></el-input>
                        <div>件</div>
                    </div>
                </div>
            </div>
            <div class="body_specifi">
                <div class="specifi_top">
                    <div class="box">
                        <div>主单位:</div>
                        <el-input v-model="product.unit" style="width:80px;"></el-input>
                    </div>
                    <div class="box">
                        <div>商品规格:</div>
                        <el-input v-model="product.name"></el-input>
                    </div>
                </div>
                <div class="specifi_other">
                    <div class="box">其他规格</div>
                    <div class="specifi_list" v-show="specifiList.length > 0">
                        <div class="specifi_top">
                            <div class="col-t2 col-header">规格</div>
                            <div class="col-t1 col-header">售价</div>
                            <div class="col-t1 col-header">原价</div>
                            <div class="col-t1 col-header">库存</div>
                            <div class="col-t3 col-header">条码</div>
                        </div>
                        <div class="specifi_item" v-for="item,index in specifiList" :key="index">
                            <div class="col-t2 col-item">
                                <el-input v-model="item.name"></el-input>
                            </div>
                            <div class="col-t1 col-item">
                                <el-input v-model="item.price"></el-input>
                            </div>
                            <div class="col-t1 col-item">
                                <el-input v-model="item.originalprice"></el-input>
                            </div>
                            <div class="col-t1 col-item">
                                <el-input v-model="item.stock"></el-input>
                            </div>
                            <div class="col-t3 col-item">
                                <el-input v-model="item.barcode"></el-input> 
                            </div>
                        </div>
                    </div>
                    <div></div>
                    <div class="specifi_other_btn">
                        <el-button @click="addSpecifi">新建规格</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <el-button @click="close">取消</el-button>
            <el-button>保存</el-button>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
const emit = defineEmits(["close"])

const close = ()=>{
    emit("close",)
}
const formSize = ref('default')
const ruleFormRef = ref()
let product = ref({
    id:82,
    name:"六神驱蚊花露水180ml",
    barcode:"6901294202788",
    thumb_text:"https://www.yujianweb.com/assets/wxapi/images/product/6901236383094.jpg",
    status:true,
    price:"21.60",
    originalprice:"24.50",
    stock:0,
    content:"",
    typeid:1,
    unit:"包",
    type_name:"推荐"
})
const rules =reactive({
    name: [
    { required: true, message: '', trigger: 'blur' },
  ],
})

let specifiList = ref([
    {
        name:'六神驱蚊花露水180ml',
        price:"22.25",
        originalprice:"232.65",
        stock:0,
        barcode:"6901294202788"
    }
])

let value1 = ref(true)     //是否不计库存

const addSpecifi = ()=>{    //添加规格
    var obj = {
        name:"",
        price:"",
        originalprice:"",
        stock:"",
        barcode:""
    }
    specifiList.value.push(obj)
    console.log(specifiList.value)
}
</script>
<style>
@import "@/assets/css/editproduct.css";
</style>
<style scoped>
@import "@/assets/css/common.css";
</style>